import { Theme } from '@mui/material/styles';
import { alpha } from '@mui/material/styles';

// 常用的样式工具函数
export const commonStyles = {
  // 弹性布局相关
  flexCenter: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  flexBetween: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  
  flexColumn: {
    display: 'flex',
    flexDirection: 'column' as const,
  },
  
  flexColumnCenter: {
    display: 'flex',
    flexDirection: 'column' as const,
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  // 文本相关
  textEllipsis: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap' as const,
  },
  
  textCenter: {
    textAlign: 'center' as const,
  },
  
  // 定位相关
  absoluteCenter: {
    position: 'absolute' as const,
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  },
  
  fullSize: {
    width: '100%',
    height: '100%',
  },
  
  // 滚动条样式
  scrollbar: (theme: Theme) => ({
    '&::-webkit-scrollbar': {
      width: '8px',
      height: '8px',
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: 'transparent',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: alpha(theme.palette.text.secondary, 0.3),
      borderRadius: '4px',
      '&:hover': {
        backgroundColor: alpha(theme.palette.text.secondary, 0.5),
      },
    },
  }),
};

// 状态颜色函数
export const getStatusColor = (status: string, theme: Theme) => {
  switch (status) {
    case 'active':
      return {
        color: theme.palette.success.main,
        backgroundColor: alpha(theme.palette.success.main, 0.1),
      };
    case 'inactive':
      return {
        color: theme.palette.error.main,
        backgroundColor: alpha(theme.palette.error.main, 0.1),
      };
    case 'suspended':
      return {
        color: theme.palette.warning.main,
        backgroundColor: alpha(theme.palette.warning.main, 0.1),
      };
    case 'locked':
      return {
        color: theme.palette.text.secondary,
        backgroundColor: alpha(theme.palette.text.secondary, 0.1),
      };
    default:
      return {
        color: theme.palette.text.primary,
        backgroundColor: alpha(theme.palette.text.primary, 0.1),
      };
  }
};

// 优先级颜色函数
export const getPriorityColor = (priority: string, theme: Theme) => {
  switch (priority) {
    case 'high':
      return theme.palette.error.main;
    case 'medium':
      return theme.palette.warning.main;
    case 'low':
      return theme.palette.info.main;
    default:
      return theme.palette.text.secondary;
  }
};

// 进度条颜色函数
export const getProgressColor = (progress: number, theme: Theme) => {
  if (progress >= 80) return theme.palette.success.main;
  if (progress >= 60) return theme.palette.info.main;
  if (progress >= 40) return theme.palette.warning.main;
  return theme.palette.error.main;
};

// 卡片悬停效果
export const cardHoverEffect = (theme: Theme) => ({
  transition: 'all 0.2s ease-in-out',
  cursor: 'pointer',
  '&:hover': {
    transform: 'translateY(-2px)',
    boxShadow: theme.shadows[8],
  },
});

// 按钮悬停效果
export const buttonHoverEffect = {
  transition: 'all 0.2s ease-in-out',
  '&:hover': {
    transform: 'translateY(-1px)',
  },
};

// 渐变背景
export const gradientBackground = (color1: string, color2: string, direction = '45deg') => ({
  background: `linear-gradient(${direction}, ${color1}, ${color2})`,
});

// 毛玻璃效果
export const glassmorphism = (theme: Theme) => ({
  background: alpha(theme.palette.background.paper, 0.8),
  backdropFilter: 'blur(10px)',
  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
});

// 响应式断点工具
export const responsive = {
  mobile: '@media (max-width: 599px)',
  tablet: '@media (min-width: 600px) and (max-width: 959px)',
  desktop: '@media (min-width: 960px)',
  largeDesktop: '@media (min-width: 1280px)',
};

// 动画关键帧
export const animations = {
  fadeIn: {
    '@keyframes fadeIn': {
      from: { opacity: 0 },
      to: { opacity: 1 },
    },
  },
  slideInUp: {
    '@keyframes slideInUp': {
      from: { transform: 'translateY(100%)', opacity: 0 },
      to: { transform: 'translateY(0)', opacity: 1 },
    },
  },
  slideInDown: {
    '@keyframes slideInDown': {
      from: { transform: 'translateY(-100%)', opacity: 0 },
      to: { transform: 'translateY(0)', opacity: 1 },
    },
  },
  slideInLeft: {
    '@keyframes slideInLeft': {
      from: { transform: 'translateX(-100%)', opacity: 0 },
      to: { transform: 'translateX(0)', opacity: 1 },
    },
  },
  slideInRight: {
    '@keyframes slideInRight': {
      from: { transform: 'translateX(100%)', opacity: 0 },
      to: { transform: 'translateX(0)', opacity: 1 },
    },
  },
  bounce: {
    '@keyframes bounce': {
      '0%, 20%, 53%, 80%, 100%': { transform: 'translateY(0)' },
      '40%, 43%': { transform: 'translateY(-30px)' },
      '70%': { transform: 'translateY(-15px)' },
      '90%': { transform: 'translateY(-4px)' },
    },
  },
  pulse: {
    '@keyframes pulse': {
      '0%': { transform: 'scale(1)' },
      '50%': { transform: 'scale(1.05)' },
      '100%': { transform: 'scale(1)' },
    },
  },
};

// Z-index层级
export const zIndex = {
  mobileStepper: 1000,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500,
};

// 通用间距
export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
};

// 通用圆角
export const borderRadius = {
  small: 4,
  medium: 8,
  large: 12,
  xlarge: 16,
  round: '50%',
};

// 通用阴影
export const boxShadow = {
  light: '0px 1px 3px rgba(0, 0, 0, 0.12)',
  medium: '0px 4px 6px rgba(0, 0, 0, 0.12)',
  heavy: '0px 8px 20px rgba(0, 0, 0, 0.15)',
  inset: 'inset 0px 2px 4px rgba(0, 0, 0, 0.1)',
};